<template>
    <div class="change-record-page">
        <!-- 頁面標題 -->
        <page-title :title="'異動記錄管理'" />

        <!-- Tab 切換 -->
        <div class="tab-section">
            <el-tabs v-model="activeTab" @tab-click="handleTabChange">
                <el-tab-pane label="入職記錄" name="onboarding"></el-tab-pane>
                <el-tab-pane label="轉正記錄" name="regularization"></el-tab-pane>
                <el-tab-pane label="調動記錄" name="transfer"></el-tab-pane>
                <el-tab-pane label="離職記錄" name="offboarding"></el-tab-pane>
            </el-tabs>
        </div>

        <!-- 篩選條件區域 -->
        <div class="filter-section">
            <el-form :model="filterForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="部門">
                            <el-select v-model="filterForm.department" placeholder="請選擇部門" clearable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item
                            :label="activeTab === 'onboarding' ? '入職日期' : activeTab === 'regularization' ? '轉正日期' : activeTab === 'transfer' ? '調動日期' : '離職日期'">
                            <el-date-picker v-model="filterForm.dateRange" type="daterange" range-separator="至"
                                start-placeholder="開始日期" end-placeholder="結束日期" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="關鍵字搜索">
                            <el-input v-model="filterForm.keyword" placeholder="請輸入員工姓名/員工編號" clearable
                                @clear="handleSearch" @keyup.enter="handleSearch">
                                <template #append>
                                    <el-button type="primary" @click="handleSearch">
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 操作按鈕區域 -->
        <div class="action-section">
            <el-button type="warning" @click="exportRecords">
                <el-icon>
                    <Download />
                </el-icon>
                <span>導出</span>
            </el-button>
        </div>

        <!-- 表格區域 -->
        <div class="table-section">
            <!-- 入職記錄表格 -->
            <el-table v-if="activeTab === 'onboarding'" :data="onboardingList" style="width: 100%" v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="入職組織部門" width="150" />
                <el-table-column prop="position" label="入職職位" width="150" />
                <el-table-column prop="employeeType" label="員工類型" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getEmployeeTypeTagType(row.employeeType)">
                            {{ row.employeeType }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="employeeStatus" label="員工狀態" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getStatusTagType(row.employeeStatus)">
                            {{ row.employeeStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="onboardingDate" label="入職日期" width="120" />
                <el-table-column prop="operator" label="操作人" width="120" />
                <el-table-column prop="operateTime" label="操作時間" width="180" />
            </el-table>

            <!-- 轉正記錄表格 -->
            <el-table v-else-if="activeTab === 'regularization'" :data="regularizationList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="轉正時組織部門" width="150" />
                <el-table-column prop="position" label="轉正時職位" width="150" />
                <el-table-column prop="onboardingDate" label="入職日期" width="120" />
                <el-table-column prop="employeeStatus" label="員工狀態" width="120">
                    <template #default="{ row }">
                        <el-tag type="success">
                            {{ row.employeeStatus }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="regularizationDate" label="轉正日期" width="120" />
                <el-table-column prop="operator" label="操作人" width="120" />
                <el-table-column prop="operateTime" label="操作時間" width="180" />
            </el-table>

            <!-- 調動記錄表格 -->
            <el-table v-else-if="activeTab === 'transfer'" :data="transferList" style="width: 100%" v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="transferType" label="調動類型" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getTransferTypeTagType(row.transferType)">
                            {{ row.transferType }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="originalDepartment" label="調動前組織部門" width="150" />
                <el-table-column prop="newDepartment" label="調動後組織部門" width="150" />
                <el-table-column prop="originalPosition" label="調動前職位" width="150" />
                <el-table-column prop="newPosition" label="調動後職位" width="150" />
                <el-table-column prop="onboardingDate" label="入職日期" width="120" />
                <el-table-column prop="transferDate" label="調動日期" width="120" />
                <el-table-column prop="operator" label="操作人" width="120" />
                <el-table-column prop="operateTime" label="操作時間" width="180" />
            </el-table>

            <!-- 離職記錄表格 -->
            <el-table v-else-if="activeTab === 'offboarding'" :data="offboardingList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="離職時組織部門" width="150" />
                <el-table-column prop="position" label="離職時職位" width="150" />
                <el-table-column prop="onboardingDate" label="入職日期" width="120" />
                <el-table-column prop="offboardingDate" label="離職日期" width="120" />
                <el-table-column prop="reason" label="離職原因" width="150" show-overflow-tooltip />
                <el-table-column prop="operator" label="操作人" width="120" />
                <el-table-column prop="operateTime" label="操作時間" width="180" />
            </el-table>

            <!-- 分頁 -->
            <div class="pagination-section">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Download } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// Tab 切換
const activeTab = ref('onboarding')

// 篩選表單
const filterForm = reactive({
    department: '',
    dateRange: [],
    keyword: ''
})

// 下拉選項
const departmentOptions = [
    { value: 'rd', label: '研發部' },
    { value: 'hr', label: '人事部' },
    { value: 'finance', label: '財務部' },
    { value: 'marketing', label: '市場部' },
    { value: 'sales', label: '銷售部' }
]

// const employeeTypeOptions = [
//     { value: 'fulltime', label: '全職' },
//     { value: 'parttime', label: '兼職' },
//     { value: 'intern', label: '實習生' },
//     { value: 'contract', label: '合同工' }
// ]

// const transferTypeOptions = [
//     { value: 'promotion', label: '晉升' },
//     { value: 'demotion', label: '降職' },
//     { value: 'lateral', label: '平調' },
//     { value: 'department', label: '部門調動' },
//     { value: 'location', label: '地點調動' }
// ]

// 表格數據
const loading = ref(false)
const onboardingList = ref([
    {
        id: 1,
        name: '張三',
        employeeId: '10001',
        department: '研發部',
        position: '前端開發',
        employeeType: 'fulltime',
        employeeStatus: '在職',
        onboardingDate: '2022-05-15',
        operator: '李四',
        operateTime: '2022-05-15 09:30'
    },
    {
        id: 2,
        name: '李四',
        employeeId: '10002',
        department: '人事部',
        position: '人事專員',
        employeeType: 'fulltime',
        employeeStatus: '在職',
        onboardingDate: '2021-08-20',
        operator: '王五',
        operateTime: '2021-08-20 10:15'
    }
])

const regularizationList = ref([
    {
        id: 3,
        name: '王五',
        employeeId: '10003',
        department: '市場部',
        position: '市場專員',
        onboardingDate: '2020-03-10',
        employeeStatus: '在職',
        regularizationDate: '2020-06-10',
        operator: '趙六',
        operateTime: '2020-06-10 14:20'
    }
])

const transferList = ref([
    {
        id: 4,
        name: '趙六',
        employeeId: '10004',
        transferType: 'promotion',
        originalDepartment: '財務部',
        newDepartment: '人事部',
        originalPosition: '會計',
        newPosition: '人事主管',
        onboardingDate: '2019-11-05',
        transferDate: '2022-02-15',
        operator: '錢七',
        operateTime: '2022-02-15 16:45'
    }
])

const offboardingList = ref([
    {
        id: 5,
        name: '錢七',
        employeeId: '10005',
        department: '銷售部',
        position: '銷售代表',
        onboardingDate: '2018-07-01',
        offboardingDate: '2023-01-31',
        reason: '個人職業發展',
        operator: '孫八',
        operateTime: '2023-01-31 11:30'
    }
])

// 分頁
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 10
})

// 多選
const selectedRecords = ref([])

// 方法
const handleTabChange = () => {
    selectedRecords.value = []
    handleSearch()
}

const handleSearch = () => {
    loading.value = true
    // 模擬API請求
    setTimeout(() => {
        loading.value = false
    }, 500)
}

const exportRecords = () => {
    ElMessage.info('導出功能待實現')
}

const handleSelectionChange = (selection) => {
    selectedRecords.value = selection
}

const handleSizeChange = (val) => {
    pagination.pageSize = val
    handleSearch()
}

const handleCurrentChange = (val) => {
    pagination.currentPage = val
    handleSearch()
}

const getEmployeeTypeTagType = (type) => {
    switch (type) {
        case 'fulltime': return 'success'
        case 'parttime': return 'warning'
        case 'intern': return 'info'
        case 'contract': return ''
        default: return 'info'
    }
}

const getStatusTagType = (status) => {
    switch (status) {
        case '在職': return 'success'
        case '試用期': return 'warning'
        case '離職': return 'danger'
        default: return 'info'
    }
}

const getTransferTypeTagType = (type) => {
    switch (type) {
        case 'promotion': return 'success'
        case 'demotion': return 'danger'
        case 'lateral': return 'info'
        case 'department': return 'warning'
        case 'location': return ''
        default: return 'info'
    }
}
</script>

<style lang="less" scoped>
.change-record-page {
    padding: 20px;
    background-color: #fff;

    .tab-section {
        margin-bottom: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 0;
        }
    }

    .filter-section {
        padding: 16px;
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .action-section {
        margin-bottom: 16px;
        display: flex;
        gap: 12px;
    }

    .table-section {
        background-color: #fff;
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

        .pagination-section {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>